import React, { useState,useEffect} from 'react'
import { useLocation } from 'react-router'
import { Link } from 'react-router-dom';
import axios from 'axios'
import './index.css'
import bigimg from '../../static/img/Search and Particulars/shangjia.png'
import littleimg1 from '../../static/img/Search and Particulars/img-1.png'
import littleimg2 from '../../static/img/Search and Particulars/img-2.png'
import littleimg3 from '../../static/img/Search and Particulars/grape.png'
import sjimg from '../../static/img/Search and Particulars/sjimg.png'
import shops from '../../static/img/Search and Particulars/peach.png'
import { Pagination} from 'antd';
import { Breadcrumb } from 'antd'
export default function Particulars() {
    var state = {
        imgs: [
            { img: bigimg, ischeck: true },
            { img: littleimg2, ischeck: false },
            { img: littleimg3, ischeck: false },
            { img: littleimg1, ischeck: false },
        ],
        kmg:[
            {mg:500,ischeck:false},
            {mg:1000,ischeck:false},
            {mg:1500,ischeck:false},
            {mg:2000,ischeck:false}
        ],
        infornation:{
            title:'礼拜五旗舰店',
            infor:'营业时间：全天24小时',
            phone:'18699563265',
            location:"浙江省温岭市人民西路281左侧.",
            announcenment:'本店有最新优惠活动，本店有最新优惠活动本店有最新优惠活动活动，到店男士享受8这优惠本店19.18有最新优惠活动...'
        },
        kinds:[
            {id:1,code:'one',name:'全部',ischoce:true},
            {id:2,code:'two',name:'餐饮',ischoce:false},
            {id:3,code:'three',name:'酒店',ischoce:false},
            {id:4,code:'four',name:'休闲',ischoce:false},
            {id:5,code:'five',name:'电影',ischoce:false},
            {id:6,code:'six',name:'汽车装饰',ischoce:false},
            {id:7,code:'seven',name:'家政服务',ischoce:false},
        ],
        kindsinfor:{
            one:[
                {
                    title:'新西兰佳沛黄金奇异果',
                    tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                    new_price:'18.80',
                    old_price:'50.00',
                    s_id:'0' ,
                    img:"http://weixiaoyu.tech/img/grape.png"
                    },
                {
                title:'新西兰佳沛黄金奇异果',
                    tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                    new_price:'8.80',
                    old_price:'30.00',
                    s_id:'1' ,
                    img:"http://weixiaoyu.tech/img/img1.png"
                },
                {
                title:'新西兰佳沛黄金奇异果',
                    tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                    new_price:'22.80',
                    old_price:'35.00',
                    s_id:'2' ,
                    img:"http://weixiaoyu.tech/img/grape.png"
                },
                {
                    title:'新西兰佳沛黄金奇异果',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'25.80',
                        old_price:'42.00',
                        s_id:'3' ,
                        img:"http://weixiaoyu.tech/img/grape.png"
                },
                {
                    title:'新西兰佳沛黄金奇异果',
                    tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                    new_price:'22.80',
                    old_price:'42.00',
                    s_id:'4' ,
                    img:"http://weixiaoyu.tech/img/youzi.png"

                },
                {
                    title:'新西兰佳沛黄金奇异果',
                    tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                    new_price:'28.20',
                    old_price:'40.00',
                    s_id:'5' ,
                    img:"http://weixiaoyu.tech/img/grape.png"
                }
            ],
            two:[
                {
                    title:'香蕉',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'18.80',
                        old_price:'50.00',
                        s_id:'0' ,
                        img:"http://weixiaoyu.tech/img/img6.png"

                        },
                    {
                    title:'香蕉',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'8.80',
                        old_price:'30.00',
                        s_id:'1' ,
                        img:"http://weixiaoyu.tech/img/img1.png"
                    },
                    {
                    title:'香蕉',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'22.80',
                        old_price:'35.00',
                        s_id:'2' ,
                        img:"http://weixiaoyu.tech/img/img2.png"

                    },
                    {
                        title:'香蕉',
                            tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                            new_price:'25.80',
                            old_price:'42.00',
                            s_id:'3' ,
                           img:"http://weixiaoyu.tech/img/grape.png"
                    },
                    {
                        title:'香蕉',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'22.80',
                        old_price:'42.00',
                        s_id:'4' ,
                        img:"http://weixiaoyu.tech/img/img2.png"
                    },
                  
            ],
            three:[
                {
                    title:'苹果',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'18.80',
                        old_price:'50.00',
                        s_id:'0' ,
                    img:"http://weixiaoyu.tech/img/img3.png"

                        },
                    {
                    title:'苹果',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'8.80',
                        old_price:'30.00',
                        s_id:'1' ,
                    img:"http://weixiaoyu.tech/img/img4.png"

                    },
                    {
                    title:'苹果',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'22.80',
                        old_price:'35.00',
                        s_id:'2' ,
                    img:"http://weixiaoyu.tech/img/img3.png"

                    },
                    {
                        title:'苹果',
                            tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                            new_price:'25.80',
                            old_price:'42.00',
                            s_id:'3' ,
                    img:"http://weixiaoyu.tech/img/img4.png"

                            },
                    {
                        title:'苹果',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'22.80',
                        old_price:'42.00',
                        s_id:'4' ,
                    img:"http://weixiaoyu.tech/img/img3.png"

                    },
                  
            ],
            four:[
                {
                    title:'橘子',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'18.80',
                        old_price:'50.00',
                        s_id:'0' ,
                    img:"http://weixiaoyu.tech/img/img4.png"

                        },
                    {
                    title:'橘子',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'8.80',
                        old_price:'30.00',
                        s_id:'1' ,
                    img:"http://weixiaoyu.tech/img/img5.png"

                    },
                    {
                    title:'橘子',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'22.80',
                        old_price:'35.00',
                        s_id:'2' ,
                    img:"http://weixiaoyu.tech/img/img6.png"

                    },
                    {
                        title:'橘子',
                            tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                            new_price:'25.80',
                            old_price:'42.00',
                            s_id:'3' ,
                    img:"http://weixiaoyu.tech/img/img2.png"

                            },
                    {
                        title:'橘子',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'22.80',
                        old_price:'42.00',
                        s_id:'4' ,
                    img:"http://weixiaoyu.tech/img/img4.png"

                    },
                  
            ],
            five:[
                {
                    title:'昨夜西风凋敝树',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'18.80',
                        old_price:'50.00',
                        s_id:'0' ,
                    img:"http://weixiaoyu.tech/img/img5.png"

                        },
                    {
                    title:'昨夜西风凋敝树',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'8.80',
                        old_price:'30.00',
                        s_id:'1' ,
                    img:"http://weixiaoyu.tech/img/img3.png"

                    },
                    {
                    title:'昨夜西风凋敝树',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'22.80',
                        old_price:'35.00',
                        s_id:'2' ,
                    img:"http://weixiaoyu.tech/img/img2.png"

                    },
                    {
                        title:'昨夜西风凋敝树',
                            tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                            new_price:'25.80',
                            old_price:'42.00',
                            s_id:'3' ,
                    img:"http://weixiaoyu.tech/img/img1.png"

                            },
                    {
                        title:'昨夜西风凋敝树',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'22.80',
                        old_price:'42.00',
                        s_id:'4' ,
                    img:"http://weixiaoyu.tech/img/img5.png"

                    },
                    {
                        title:'昨夜西风凋敝树',
                            tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                            new_price:'8.80',
                            old_price:'30.00',
                            s_id:'1' ,
                    img:"http://weixiaoyu.tech/img/img4.png"

                        },
                    {
                        title:'昨夜西风凋敝树',
                            tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                            new_price:'8.80',
                            old_price:'30.00',
                            s_id:'1' ,
                    img:"http://weixiaoyu.tech/img/img3.png"

                        },
                    {
                        title:'昨夜西风凋敝树',
                            tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                            new_price:'8.80',
                            old_price:'30.00',
                            s_id:'1' ,
                    img:"http://weixiaoyu.tech/img/img3.png"

                        },
                  
            ],  
            six:[
                {
                    title:'月上柳梢头',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'18.80',
                        old_price:'50.00',
                        s_id:'0' ,
                    img:"http://weixiaoyu.tech/img/img5.png"

                        },
                    {
                    title:'月上柳梢头',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'8.80',
                        old_price:'30.00',
                        s_id:'1' ,
                    img:"http://weixiaoyu.tech/img/img2.png"

                    },
                    {
                    title:'月上柳梢头',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'22.80',
                        old_price:'35.00',
                        s_id:'2' ,
                    img:"http://weixiaoyu.tech/img/img3.png"

                    },
                    {
                        title:'月上柳梢头',
                            tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                            new_price:'25.80',
                            old_price:'42.00',
                            s_id:'3' ,
                    img:"http://weixiaoyu.tech/img/img4.png"

                            },
                    {
                        title:'月上柳梢头',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'22.80',
                        old_price:'42.00',
                        s_id:'4' ,
                    img:"http://weixiaoyu.tech/img/img5.png"

                    },
                    {
                        title:'月上柳梢头',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'22.80',
                        old_price:'42.00',
                        s_id:'4' ,
                    img:"http://weixiaoyu.tech/img/img6.png"

                    },
                    {
                        title:'月上柳梢头',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'22.80',
                        old_price:'42.00',
                        s_id:'4' ,
                    img:"http://weixiaoyu.tech/img/img1.png"

                    },
                  
            ],  
            seven:[
                {
                    title:'人约黄昏后',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'18.80',
                        old_price:'50.00',
                        s_id:'0' ,
                    img:"http://weixiaoyu.tech/img/img3.png"

                        },
                    {
                    title:'人约黄昏后',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'8.80',
                        old_price:'30.00',
                        s_id:'1' ,
                    img:"http://weixiaoyu.tech/img/img5.png"

                    },
                    {
                    title:'人约黄昏后',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'22.80',
                        old_price:'35.00',
                        s_id:'2' ,
                    img:"http://weixiaoyu.tech/img/img6.png"

                    },
                    {
                        title:'人约黄昏后',
                            tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                            new_price:'25.80',
                            old_price:'42.00',
                            s_id:'3' ,
                    img:"http://weixiaoyu.tech/img/img2.png"

                            },
                    {
                        title:'人约黄昏后',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'22.80',
                        old_price:'42.00',
                        s_id:'4' ,
                    img:"http://weixiaoyu.tech/img/img3.png"

                    },
                  
            ],      
        },
        number: 0,//用于计算当前点击的第几个小照片
        isbechoce: false,//用于配合三目运算符改变小照片边框
        iscollect:false,  //用于配合三目运算符改变收藏星星的字体颜色
        chocemg:false   ,  //用于配合三目运算符改变选择商品规格的边框和背景
        kings:'one'
    }
    //数据初始化
    const id = useLocation().search.substr(1)
    const [count, setCount] = useState(state)
    useEffect(() => {
        console.log(id);
       axios.post('http://localhost:3001/storeinfor',{id}).then((res)=>{
           console.log(res.data);
           setCount({...state,infornation:res.data})
       })
    }, [])
    console.log(count);
    //初始化大照片
    const [countbigimg, setCountbigimg] = useState(bigimg)
    //购物车初始化
    const [countcar, setCountcar] = useState(0)
    //初始化列表
    const [countkinds, setkinds] = useState('one')
    //点击选择小图片
    function ischoce(i) {
        console.log(i);
        const choceit = JSON.parse(JSON.stringify(count))
        choceit.number = i
        for (let index = 0; index < choceit.imgs.length; index++) {
            choceit.imgs[index].ischeck = false
        }
        choceit.imgs[i].ischeck = !choceit.imgs[i].ischeck
        setCount(choceit)
        setCountbigimg(choceit.imgs[i].img)
    }
    //点击右箭头切换小照片
    function isright() {
        const rightcount = JSON.parse(JSON.stringify(count))
        for (let index = 0; index < rightcount.imgs.length; index++) {
            rightcount.imgs[index].ischeck = false
        }
        if (rightcount.number < 3) {
            rightcount.number++
            rightcount.imgs[rightcount.number].ischeck = true
            setCount(rightcount)
            setCountbigimg(rightcount.imgs[rightcount.number].img)
        } else {
            rightcount.number = 3
            rightcount.imgs[rightcount.number].ischeck = true
            setCount(rightcount)
            setCountbigimg(rightcount.imgs[rightcount.number].img)
        }
    }
    //点击左箭头切换小照片
    function isleft() {
        const leftcount = JSON.parse(JSON.stringify(count))
        for (let index = 0; index < leftcount.imgs.length; index++) {
            leftcount.imgs[index].ischeck = false
        }
        if (leftcount.number > 0) {
            leftcount.number--
            leftcount.imgs[leftcount.number].ischeck = true
            setCount(leftcount)
            setCountbigimg(leftcount.imgs[leftcount.number].img)
        } else {
            leftcount.number = 0
            leftcount.imgs[leftcount.number].ischeck = true
            setCount(leftcount)
            setCountbigimg(leftcount.imgs[leftcount.number].img)
        }
    }
    //点击加号购物车-1
    function loseone(){
        if (countcar>0) {
            setCountcar(countcar-1)
        }else{
            setCountcar(0)
        }
    }
      //点击改变选择规格的边框和背景
      function ischocemg(i){
        const ischoceit =JSON.parse(JSON.stringify(count))
        for (let index = 0; index < ischoceit.kmg.length; index++) {
            ischoceit.kmg[index].ischeck=false   
        }
        ischoceit.kmg[i].ischeck = !ischoceit.kmg[i].ischeck
        setCount(ischoceit)
    }
  //点击购物车小图标的按钮弹出加入购物车的弹窗
  const [ischoceshop,setchoceshop] =useState({id:'',nowprice:'',oldprice:''})    
    function addcar(id,nowprice,oldprice){
        const carwindow = document.getElementsByClassName('C-modul')[0]
        carwindow.className='C-modulshow'
        setchoceshop({id:id,nowprice:nowprice,oldprice:oldprice})
    }
  
  //点击弹窗的加入购物车的按钮
   function addtocar(){
    const a= count.kmg.filter(v=>{
        return v.ischeck===true
    })
     const addshop ={id:ischoceshop.id,price:ischoceshop.nowprice,nums:countcar,mg:a[0].mg}
     console.log(addshop);
     const modul=document.getElementsByClassName('C-modulshow')[0]
     modul.className='C-modul'
 }
    //点击切换导航
    function changecolor(i,code){
      const changecolor = JSON.parse(JSON.stringify(count))
      for (let index = 0; index < changecolor.kinds.length; index++) {
        changecolor.kinds[index].ischoce=false
      }
      changecolor.kinds[i].ischoce= ! changecolor.kinds[i].ischoce
      setCount(changecolor)
      setkinds(code)
      console.log(code);
    }
    return (
            <div className='P-middle'>
                <div className="P-top">
                <Breadcrumb>
                    <Breadcrumb.Item>您的当前位置</Breadcrumb.Item>
                    <Breadcrumb.Item>
                    <Link to='/'>首页</Link>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                    <Link to='/tosearch'>全部商品</Link>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>商品详情</Breadcrumb.Item>
            </Breadcrumb>
                </div>
                <div className="m-details">
                    <div className="m-showimg">
                        <div className="m-bigimg ">
                            <img src={countbigimg} alt="" />
                        </div>
                        <div className="m-littleimg">
                            <div className="m-left">
                                <i className='fa fa-angle-left' onClick={isleft}></i>
                            </div>
                            {
                                count.imgs.map((v, i) => {
                                    return (
                                        <div className={v.ischeck? "m-littleimg2" : "m-littleimg1"} key={i} onClick={() => ischoce(`${i}`)}>
                                            <img src={v.img} alt="" />
                                        </div>
                                    )
                                })
                            }
                            <div className="m-right" onClick={isright}>
                                <i className='fa fa-angle-right'></i>
                            </div>
                        </div>
                    </div>
                <div className="merchantinfor">
                    <h3 className='firdaystor'>{count.infornation.name}</h3>
                    <div className="merchantabout">
                        <p><i className="fa fa-shopping-bag"></i> {count.infornation.name} <span>¥62/人</span>   </p>
                        <p><i className="fa fa-mobile-phone"></i> {count.infornation.phone}  </p>
                        <p><i className="fa fa-location-arrow"></i> {count.infornation.address} </p>
                    </div>
                    <div className="announcenment">
                        <h3>商家公告:</h3>
                        本店有最新优惠活动，本店有最新优惠活动本店有最新优惠活动活动，到店男士享受8这优惠本店19.18有最新优惠活动...

                    </div>
                    
                </div>
                <div className="c-right">
                    <img src={sjimg} alt="" />
                </div>
                </div>
                <ul className="m-chocekinds">
                    <span>分类:</span>
                    {
                        count.kinds.map((v,i)=>{
                            return(
                                <li className={v.ischoce ? 'kindtext2' :'kindtext'} onClick={()=>changecolor(i,v.code)} key={i}>{v.name}</li>
                            )
                        })
                    }                     
                </ul>
                <div className="shopshow">
                    {
                        count.kindsinfor[countkinds].map((v,i)=>{
                            return(
                                <div className="shopinfor" key={i}>
                                 <div className="shopimg" >
                                     <div className="shop_img">
                                     <img src={v.img} alt="" />
                                     </div>
                                    <h3>{v.title}</h3>
                                    <h4>{v.tip}</h4>
                                    <span className="m-new_price">￥{v.new_price}</span><span className="m-old_price">￥{v.old_price}</span><i className="fa fa-shopping-cart" onClick={()=>addcar(v.s_id,v.new_price,v.old_price)}></i>
                                </div>
                            </div>
                            )
                        })
                    }
                </div> 
                <div className="peges">
                    <Pagination showQuickJumper defaultCurrent={1} total={500} pageSize={12} />
                </div>
                <div className="C-modul">
                <h4>请选择产品规格</h4>
                <hr />
                <div className="nowprice">
                        <strong>现价：￥{ischoceshop.nowprice}</strong>&nbsp;&nbsp;&nbsp;<span>原价：{ischoceshop.oldprice}</span>
                    </div>
                    <div className="chocekg">
                        <div className="ischocekg">请选择规格</div>
                        {
                        count.kmg.map((v,i)=>{
                            return(
                        <div className={v.ischeck ? 'kgnum1' :'kgnum'} onClick={()=>ischocemg(i,v.mg)} key={i}>{v.mg}</div>
                            )
                        })
                        }
                      
                        <div className="addchar">
                            <div className="ischocekg">数量:</div>
                            <div className="addnum">
                                <div className="losenum" onClick={loseone}><i className='fa fa-minus'></i></div>
                                <div className="carnums">{countcar}</div>
                                <div className="losenum" onClick={()=>setCountcar(countcar+1)}><i className='fa fa-plus'></i></div>
                            </div>
                            <div className="to-cart" onClick={addtocar}>
                                添加到购物车
                            </div>
                           
                        </div>
                        
                    </div>
            </div>
             </div>
    )
}
